<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>E-code后台模板</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/defalut.theme.css" />
</head>
<body>
    <!-- 顶头部 start -->
    <header>
        <div class="head">
            <div class="logo pull-left">
                <img width="40" height="30" src="./images/admin-logo.png" alt="">
                <b>&nbsp;&nbsp;E-code</b>
            </div>
            <div class="info-right pull-right">
                <ul>
                    <a href=""><li class="pull-right"><i class="glyphicon glyphicon-home"></i> 网站前台 </li></a>
                    <a  href=""><li class="pull-right"><i class="glyphicon glyphicon-refresh"></i> 清除缓存 </li></a>
                    <a href=""><li class="pull-right"><i class="glyphicon glyphicon-user"></i> 欢迎：Admin </li></a>
                </ul>
            </div>

        </div>
    </header>
    <!-- 顶头部 stop -->
    <aside>
        <div class="checkbox">
            <label>
                <input id="nav-path" type="checkbox"> 路径导航
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input id="back-panel" type="checkbox"> 背景面板-form
            </label>
        </div>
        <div class="checkbox">
            <label>
                 输入框
            </label>
                 <button type="button" class="btn btn-primary btn-xs add" data="input" id="input-add">添加</button>
                 <button type="button" class="btn btn-default btn-xs del" data="input" id="input-del">删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 文本域
            </label>
                 <button type="button" class="btn btn-primary btn-xs add" data="text" id="text-add">添加</button>
                 <button type="button" class="btn btn-default btn-xs del" data="text" id="text-del">删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 可视编辑
            </label>
                 <button type="button" class="btn btn-primary btn-xs" id="visual-add" >添加</button>
                 <button type="button" class="btn btn-default btn-xs" id="visual-del" >删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 下拉框
            </label>
                 <button type="button" class="btn btn-primary btn-xs add" data="select" id="select-add">添加</button>
                 <button type="button" class="btn btn-default btn-xs del" data="select" id="select-del">删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 单选项
            </label>
                 <button type="button" class="btn btn-primary btn-xs add" data="radio" id="radio-add">添加</button>
                 <button type="button" class="btn btn-default btn-xs del" data="radio" id="radio-del">删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 多选项
            </label>
                 <button type="button" class="btn btn-primary btn-xs add" data="mulradio" id="checkbox-add">添加</button>
                 <button type="button" class="btn btn-default btn-xs del" data="mulradio" id="checkbox-del">删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 下拉多选
            </label>
                 <button type="button" class="btn btn-primary btn-xs add" data="multiple" id="multiple-add">添加</button>
                 <button type="button" class="btn btn-default btn-xs del" data="multiple" id="multiple-del">删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 上传项
            </label>
                 <button type="button" class="btn btn-primary btn-xs add" data="file" id="file-add">添加</button>
                 <button type="button" class="btn btn-default btn-xs del" data="file" id="file-del">删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 提交项
            </label>
                 <button type="button" class="btn btn-primary btn-xs add" data="submit" id="submit-add">添加</button>
                 <button type="button" class="btn btn-default btn-xs del" data="submit" id="submit-del">删除</button>
            
        </div>
        <div class="checkbox">
            <label>
                 操作
            </label>
                 <button type="button" class="btn btn-primary btn-xs" id="auto-page-add">生成代码</button>
                 <button type="button" class="btn btn-default btn-xs" id="auto-page-del">返回生成</button>
            
        </div>
    </aside>
    <div class="main"></div>

<!-- 隐藏组件 start -->
<div class="hide">
    <!-- 路径导航 -->
    <div class="nav-path">
    <ol  class="breadcrumb auto-nav-path">
      <li><i class="glyphicon glyphicon-home"></i>&nbsp;&nbsp;<a href="#">后台首页</a></li>
      <li class="active">后台管理中心</li>
    </ol>   
    </div>

    <!-- 背景面板 -->
    <div class="back-panel">
        <div class="panel panel-default auto-back-panel">
            <div class="panel-heading"> <i class="glyphicon glyphicon-pencil"></i> 编辑页</div>
            <div class="panel-body">
                <form class="form-horizontal">
                </form>
            </div>
        </div>
    </div>
    
    <!-- 文本输入框 -->
    <div class="input">
        <div class="form-group auto-input">
            <label for="inputEmail3" class="col-sm-2 control-label">昵称</label>
            <div class="col-sm-3">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>
    </div>

    <!-- 文本域 -->
    <div class="text">
        <div class="form-group auto-text">
            <label for="input2" class="col-sm-2 control-label">描述</label>
            <div class="col-sm-4">
                <textarea id="input2" class="form-control" rows="3"></textarea>
            </div>
        </div>
    </div>

    <!-- 可视化编辑 -->
    <div class="visual">
        <div class="form-group auto-visual">
            <label for="input8" class="col-sm-2 control-label">可视化编辑</label>
            <div class="col-sm-6">
                <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
            </div>
        </div>
    </div>

    <!-- 下拉框 -->
    <div class="select">
        <div class="form-group auto-select">
            <label for="input3" class="col-sm-2 control-label">区域</label>
            <div class="col-sm-3">
                <select id="input3" class="form-control" name="" id="">
                    <option value="0">请选择</option>
                    <option value="1">北京市</option>
                    <option value="2">广东省</option>
                </select>
            </div>
        </div>
    </div>

    <!-- 单选项 -->
    <div class="radio">
        <div class="form-group auto-radio">
            <label for="input4" class="col-sm-2 control-label">状态</label>
            <div class="col-sm-3">
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" checked id="inlineRadio1" value="option1"> 启用
                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 禁用
                </label>
            </div>
        </div>
    </div>

    <!-- 多选项 -->
    <div class="mulradio">
        <div class="form-group auto-mulradio">
            <label for="input5" class="col-sm-2 control-label">推荐</label>
            <div class="col-sm-3">
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox1" value="option1"> 热销
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox2" value="option2"> 新品
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox3" value="option3"> 极品
                </label>
            </div>
        </div>
    </div>

    <!-- 下拉多选 -->
    <div class="multiple">
        <div class="form-group auto-multiple">
            <label for="input7" class="col-sm-2 control-label">下拉列表</label>
            <div class="col-sm-3">
                <select  multiple class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
    </div>

    <!-- 上传控件 -->
    <div class="file">
        <div class="form-group auto-file">
            <label for="input5" class="col-sm-2 control-label">图片</label>
            <div class="col-sm-3">
                <a href="javascript:;" class="e-file">选择文件
                    <input type="file" name="" id="">
                </a>
            </div>
        </div>
    </div>

    <!-- 提交表单 -->
    <div class="submit">
        <div class="form-group auto-submit">
            <div class="col-sm-offset-2 col-sm-6">
                <button type="submit" class="btn btn-success">确定</button>
                <a class="btn btn-default" href="#" role="button">返回</a>
            </div>
        </div>
    </div>

</div>
<!-- 隐藏组件 end -->

<!-- 代码区域 start -->
<div id="buildArea"  style="margin-top:100px;float:left;margin-left:50px;display:none">
<h3>将代码复制到 public.html 中的 .main 里 另存一个新文件 ^_^</h3> <br>
<textarea name="" id="build" cols="150" rows="30"></textarea>
</div>
<!-- 代码区域 end -->


</body>
<script src="./javascript/jquery.min.js"></script>
<script src="./javascript/bootstrap.min.js"></script>
<script src="./javascript/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="./javascript/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="./javascript/Chart.js"></script>
<script src="./javascript/defalut.theme.js"></script>
<script src="./javascript/ueditor.config.js"></script>
<script src="./javascript/ueditor.all.min.js"></script>
<script>
    $(function(){
        // 左侧菜单展开事件
        $('.left-nav').click(function(){
            $('.left-nav').children('dt').children('.arrow-right').removeClass('glyphicon-menu-down');
            $('.left-nav dl').hide("slow");
            $(this).children('dl').stop(true, false).slideToggle("slow");
            $(this).children('dt').children('.arrow-right').addClass('glyphicon-menu-down');
        });

        //添加路径导航
        $("#nav-path").click(function(){
            var html    = $(".nav-path").html();
            var status  = $(this).is(":checked");
            if(status) {
                $('.main').append(html);
            } else {
                $(".main .auto-nav-path").remove();
            }
        });

        //添加背景面板
        $("#back-panel").click(function(){
            var html    = $(".back-panel").html();
            var status  = $(this).is(":checked");
            if(status) {
                $('.main').append(html);
            } else {
                $(".main .auto-back-panel").remove();
            }
        });
        //表单控件添加
        $(".add").click(function(){
            checkFrom();
            var data = $(this).attr('data');
            var html = $("."+data).html();
            $(".main .form-horizontal").append(html);
        });
        //表单控件删除
        $(".del").click(function(){
            var data = $(this).attr('data');
            var html= $(".main .auto-"+data);
            var htmlNum = html.length - 1;
            if(htmlNum >= 0) {
                html[htmlNum].remove();
            }
        });
        //可视化编辑添加
        var htmlNum = 1;
        $("#visual-add").click(function(){
            if(checkFrom()){
                return;
            }
            var html        = $(".visual").html();
            $(".main .form-horizontal").append(html);
            $(".main .auto-visual #container").attr('id','container'+htmlNum);
            $(".main").after('<script class="Jscontainer">//var ue = UE.getEditor("container'+htmlNum+'");<\/script>'); 
            ++htmlNum;
        });
        //可视化编辑删除
        $("#visual-del").click(function(){
            var html        = $(".main .auto-visual");
            var jshtml      = $(".Jscontainer");
            console.log(jshtml);
            var htmlNum     = html.length - 1;
            
            if(htmlNum >= 0) {
                $(html[htmlNum]).next('textarea').remove();
                html[htmlNum].remove();
                jshtml[0].remove();
            }

        });
        //生成
        $("#auto-page-add").click(function(){
            var html = $(".main").html();
            console.log(html);
            $(".main").hide();
            $("#build").val(html);
            $("#buildArea").show();
        });
        //重新生成
        $("#auto-page-del").click(function(){
            $(".main").show();
            $("#buildArea").hide();
        });


        //检查form需要先添加
        function checkFrom(){
            var status  = $("#back-panel").is(":checked");
            if(!status) {
                alert('请先添加背景面板');
                return true;
            }
            return false;
        }

    });
</script>        
</body>
</html>